<template>
  <div class="chart-container">
    <div ref="chartRef" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chart = null

onMounted(async () => {
  // 初始化图表
  chart = echarts.init(chartRef.value)
  
  try {
    // 获取数据
    const response = await fetch('/api/statistics/length-distribution')
    const data = await response.json()
    
    if (data.status === 'success') {
      // 配置图表选项
      const option = {
        title: {
          text: '邮件长度分布'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: data.data.ranges,
          name: '字符长度范围'
        },
        yAxis: {
          type: 'value',
          name: '邮件数量'
        },
        series: [{
          data: data.data.counts,
          type: 'bar',
          name: '数量'
        }]
      }
      
      // 渲染图表
      chart.setOption(option)
    }
  } catch (error) {
    console.error('获取长度分布数据失败:', error)
  }
})

// 组件卸载时销毁图表
onUnmounted(() => {
  if (chart) {
    chart.dispose()
  }
})
</script>

<style scoped>
.chart-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style> 